<!DOCTYPE HTML>
<html>

    <head>
        <meta charset="utf-8">
        <title>3D图片环</title>
        <style>
            * {
                margin: 0;
                padding: 0;
            }
            
            body {
                background: rgba(2, 2, 2, 1);
                overflow: hidden;
            }
            
            #div2 {
                position: absolute;
                left: 50%;
                top: 50%;
                width: 1200px;
                height: 1200px;
                background: -webkit-radial-gradient(center center, 600px 600px, rgba(50, 50, 50, 1), rgba(0, 0, 0, 0));
                background: -moz-radial-gradient(center center, 600px 600px, rgba(50, 50, 50, 1), rgba(0, 0, 0, 0));
                background: -ms-radial-gradient(center center, 600px 600px, rgba(50, 50, 50, 1), rgba(0, 0, 0, 0));
                background: -o-radial-gradient(center center, 600px 600px, rgba(50, 50, 50, 1), rgba(0, 0, 0, 0));
                background: radial-gradient(center center, 600px 600px, rgba(50, 50, 50, 1), rgba(0, 0, 0, 0));
                margin-left: -600px;
                margin-top: -600px;
                -webkit-transform: translateY(200px) rotateX(90deg);
                -moz-transform: translateY(200px) rotateX(90deg);
                -ms-transform: translateY(200px) rotateX(90deg);
                -o-transform: translateY(200px) rotateX(90deg);
                transform: translateY(200px) rotateX(90deg);
            }
            
            #div1 {
                width: 200px;
                height: 200px;
                position: relative;
                margin: 150px auto;
                background: null;
                -webkit-transform: perspective(1000px) rotateX(-10deg) rotateY(0deg);
                -moz-transform: perspective(1000px) rotateX(-10deg) rotateY(0deg);
                -ms-transform: perspective(1000px) rotateX(-10deg) rotateY(0deg);
                -o-transform: perspective(1000px) rotateX(-10deg) rotateY(0deg);
                transform: perspective(1000px) rotateX(-10deg) rotateY(0deg);
                -webkit-transform-style: preserve-3d;
                -moz-transform-style: preserve-3d;
                -ms-transform-style: preserve-3d;
                -o-transform-style: preserve-3d;
                transform-style: preserve-3d;
            }
            
            #div1 div.hid {
                position: absolute;
                left: 50%;
                margin-left: -67px;
                margin-top: -90px;
                top: 50%;
                background-size: 100% 100%;
                font-size: 50px;
                -webkit-transition: 1s all ease;
                -moz-transition: 1s all ease;
                -ms-transition: 1s all ease;
                -o-transition: 1s all ease;
                transition: 1s all ease;
                overflow: hidden;
                width: 153px;
                height: 400px;
                -webkit-transform: rotateY(0deg) translateZ(0px);
                -moz-transform: rotateY(0deg) translateZ(0px);
                -ms-transform: rotateY(0deg) translateZ(0px);
                -o-transform: rotateY(0deg) translateZ(0px);
                transform: rotateY(0deg) translateZ(0px);
            }
            
            #div1 div.img {
                top: 10px;
                left: 10px;
                margin: 0;
                box-shadow: 0 0 10px white;
                width: 133px;
                height: 200px;
                position: absolute;
                border-radius: 2px;
            }
            
            #div1 div.img .shadow {
                position: absolute;
                left: 0;
                top: -102px;
                width: 133px;
                height: 200px;
                background-size: 100% 100%;
                opacity: 0.2;
            }
            
            #div1 div .over {
                position: absolute;
                left: 0;
                top: 214px;
                width: 133px;
                height: 100px;
                overflow: -hidden;
                -webkit-transform: scale(1, -1);
                -moz-transform: scale(1, -1);
                -ms-transform: scale(1, -1);
                -o-transform: scale(1, -1);
                transform: scale(1, -1);
            }
            
            body {
                _background-image: url(image/bg.jpg);
                _background-attachment: fixed;
            }
            
            .od {
                width: 100%;
                clear: both;
                overflow: hidden;
                position: fixed;
                bottom: 20px;
                text-align: center;
                color: #FFF;
                font-family: Verdana;
                z-index: 99999;
            }
            
            .od a {
                color: #FFF;
                text-decoration: none;
            }
        </style>
    </head>

    <body>
        <div id="div1">
            <strong id="div2"></strong>
        </div>
        
        <script type="text/javascript">
            window.onload = function() {
                var M = 11;
                var oDiv = document.getElementById('div1');
                var aDiv = oDiv.getElementsByClassName('hid');
                var x = -10;
                var y = 0;

                var speedX = 0;
                var speedY = 0;

                for(var i = 1; i <= M; i++) {
                    var oNewDiv = document.createElement('div');

                    oNewDiv.className = 'hid';

                    (function(oNewDiv, i) {
                        setTimeout(function() {
                            oNewDiv.style.WebkitTransform = 'rotateY(' + (360 * (i - 1) / M) + 'deg) translateZ(400px)';
                            oNewDiv.style.MozTransform = 'rotateY(' + (360 * (i - 1) / M) + 'deg) translateZ(400px)';
                            oNewDiv.style.msTransform = 'rotateY(' + (360 * (i - 1) / M) + 'deg) translateZ(400px)';
                            oNewDiv.style.OTransform = 'rotateY(' + (360 * (i - 1) / M) + 'deg) translateZ(400px)';
                            oNewDiv.style.transform = 'rotateY(' + (360 * (i - 1) / M) + 'deg) translateZ(400px)';

                            setTimeout(function() {
                                if(i == M) fixAll();

                                setTimeout(function() {

                                    oNewDiv.style.WebkitTransition = 'none';
                                    oNewDiv.style.MozTransition = 'none';
                                    oNewDiv.style.msTransition = 'none';
                                    oNewDiv.style.OTransition = 'none';
                                    oNewDiv.style.transition = 'none';

                                }, 1000);
                            }, 3000);
                        }, (M + 3 - i) * 200);
                    })(oNewDiv, i);

                    oNewDiv.degY = 360 * (i - 1) / M;

                    oNewDiv.innerHTML = '<div class="img"><span class="over"><span class="shadow"></span></span></div>';
                    oNewDiv = oNewDiv.getElementsByClassName('img')[0];

                    oNewDiv.style.background = 'url(img/' + i + '.jpg)';

                    oNewDiv.getElementsByClassName('shadow')[0].style.background = '-webkit-linear-gradient(rgba(0,0,0,1) 40%, rgba(255,255,255,0)), url(img/' + i + '.jpg)';
                    oNewDiv.getElementsByClassName('shadow')[0].style.background = '-moz-linear-gradient(rgba(0,0,0,1) 40%, rgba(255,255,255,0)), url(img/' + i + '.jpg)';
                    oNewDiv.getElementsByClassName('shadow')[0].style.background = '-ms-linear-gradient(rgba(0,0,0,1) 40%, rgba(255,255,255,0)), url(img/' + i + '.jpg)';
                    oNewDiv.getElementsByClassName('shadow')[0].style.background = '-o-linear-gradient(rgba(0,0,0,1) 40%, rgba(255,255,255,0)), url(img/' + i + '.jpg)';
                    oNewDiv.getElementsByClassName('shadow')[0].style.backgroundSize = '100% 100%';
                    oNewDiv.style.backgroundSize = '100% 100%';

                    oDiv.appendChild(oNewDiv.parentNode);
                    
                }

                document.onmousedown = function(ev) {
                    var oEvent = ev || event;
                    var mouseStartX = oEvent.clientX;
                    var mouseStartY = oEvent.clientY;

                    var startX = x;
                    var startY = y;

                    var lastX = mouseStartX;
                    var lastY = mouseStartY;

                    speedX = speedY = 0;

                    document.onmousemove = function(ev) {
                        var oEvent = ev || event;

                        y = startY + (oEvent.clientX - mouseStartX) / 10;
                        x = startX - (oEvent.clientY - mouseStartY) / 10;

                        speedX = (oEvent.clientX - lastX) / 5;
                        speedY = (oEvent.clientY - lastY) / 5;

                        fixAll();

                        lastX = oEvent.clientX;
                        lastY = oEvent.clientY;
                    };

                    document.onmouseup = function() {
                        document.onmousemove = null;
                        document.onmouseup = null;

                        startMove();
                    };

                    stopMove();

                    return false;
                };

                var timer = null;

                function startMove() {
                    clearInterval(timer);
                    timer = setInterval(function() {
                        x -= speedY;
                        y += speedX;

                        speedY *= 0.93;
                        speedX *= 0.93;

                        if(Math.abs(speedX) < 0.1 && Math.abs(speedY) < 0.1)
                            stopMove();

                        fixAll();
                    }, 30);
                }

                function stopMove() {
                    clearInterval(timer);
                }

                function fixAll() {
                    oDiv.style.WebkitTransform = 'perspective(1000px) rotateX(' + x + 'deg) rotateY(' + y + 'deg)';
                    oDiv.style.MozTransform = 'perspective(1000px) rotateX(' + x + 'deg) rotateY(' + y + 'deg)';
                    oDiv.style.msTransform = 'perspective(1000px) rotateX(' + x + 'deg) rotateY(' + y + 'deg)';
                    oDiv.style.OTransform = 'perspective(1000px) rotateX(' + x + 'deg) rotateY(' + y + 'deg)';
                    oDiv.style.transform = 'perspective(1000px) rotateX(' + x + 'deg) rotateY(' + y + 'deg)';

                    for(var i = 0; i < aDiv.length; i++) {
                        var deg = aDiv[i].degY + y;
                        var a = (deg % 360 + 360) % 360;

                        a = Math.abs(180 - a);

                        var d = 0.1 + (a / 180) * 0.9;

                        if(d < 0.2) d = 0.2;

                        aDiv[i].style.opacity = d;

                        //aDiv[i].innerHTML=parseInt(a);
                    }
                }
            };
        </script>
    </body>

</html>